<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>京东小额贷线上预约系统</title>
    <script language="javascript" type="text/javascript" src="vue/vue2.x.js"></script>
    <script language="javascript" type="text/javascript" src="elementUI/elementUI2.x.js"></script>
    <!--        <link rel="stylesheet" href="elementUI/elementUI2.x.css" type="text/css">-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style type="text/css" rel="stylesheet">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            overflow: hidden;
        }
        .el-header {
            border-bottom: 2px solid #13ce66;
            box-sizing: border-box;
        }
        .el-footer {
            border-top: 2px solid #13ce66;
            line-height: 60px;
            text-align: center;
            box-sizing: border-box;
        }

        .el-aside {
            width: auto !important;
        }

        .el-main {
            padding: 10px;
            /*background-color: #81ffab;*/
        }
        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 200px;
            min-height: 400px;
        }

        a {
            text-decoration: none;
            color: #000;
        }
        /*header 右侧菜单*/
        #right_info{
            float: right;
            line-height: 60px;
            position: relative;
            padding-right: 10px;
            padding-left: 60px;
        }
        #right_info > img{
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            margin-right: 5px;
        }
        #right_info:hover #sub_userinfo{
            display: block;
        }
        #sub_userinfo{
            width:100%;
            line-height: 50px;
            display: none;
            position:absolute;
            left: 0;
            top: 60px;
            border: 1px solid #c6c6c6;
            text-align: center;
        }
        #sub_userinfo div{
            height: 50px;
            border-bottom: 1px solid #b8e0ab;
        }
        #sub_userinfo div:hover{
            background-color: #8bd8e7;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header id="el_header">
            <div style="float: left; line-height: 60px; font-size:25px; font-weight: 800">京东小额贷线上预约系统</div>
            <div id="right_info">
                <img th:src="${user.getUser_img()}" style="border-radius: 50%" width="50px" height="50px">
                <span th:text="${user.getUser_name()}">用户名</span>
                <div id="sub_userinfo">
<!--                    <a href="#" target="iframe"><div>个人中心</div></a>-->
                    <a href="/logout"><div>注销</div></a>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside id="el_aside">
                <div shiro:hasPermission="role:user">
                    <el-menu class="el-menu-vertical-demo" default-active="1-1" >
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span slot="title">个人中心</span>
                            </template>
                            <el-menu-item-group>
                                <a href="/user/userInfo" target="iframe" class="default_active">
                                    <el-menu-item index="1-1">我的信息</el-menu-item>
                                </a>
                                <a href="/user/goUpdateUserInfo" target="iframe">
                                    <el-menu-item index="1-2">信息修改</el-menu-item>
                                </a>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">我要贷款</span>
                            </template>
                            <el-menu-item-group>
                                <a href="/user/goLoanApplication" target="iframe">
                                    <el-menu-item index="2-1">贷款申请</el-menu-item>
                                </a>
                                <a href="/user/goLoansInfo" target="iframe">
                                    <el-menu-item index="2-2">查看贷款状态</el-menu-item>
                                </a>
                            </el-menu-item-group>
                        </el-submenu>
<!--                        <el-submenu index="3">-->
<!--                            <template slot="title">-->
<!--                                <i class="el-icon-menu"></i>-->
<!--                                <span slot="title">我要还款</span>-->
<!--                            </template>-->
<!--                            <el-menu-item-group>-->
<!--                                <a href="" target="iframe">-->
<!--                                    <el-menu-item index="3-1">-&#45;&#45;</el-menu-item>-->
<!--                                </a>-->
<!--                                <a href="" target="iframe">-->
<!--                                    <el-menu-item index="3-2">-&#45;&#45;</el-menu-item>-->
<!--                                </a>-->
<!--                            </el-menu-item-group>-->
<!--                        </el-submenu>-->
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">问题反馈</span>
                            </template>
                            <el-menu-item-group>
                                <a href="/toSocket" target="iframe">
                                    <el-menu-item index="4-1">联系客服</el-menu-item>
                                </a>
                                <!--<a href="" target="iframe">-->
                                <!--    <el-menu-item index="4-2">查看消息</el-menu-item>-->
                                <!--</a>-->
                            </el-menu-item-group>
                        </el-submenu>
<!--                        <el-menu-item index="5">-->
<!--                            <i class="el-icon-setting"></i>-->
<!--                            <span slot="title">导航四</span>-->
<!--                        </el-menu-item>-->
                    </el-menu>
                </div>
                <div shiro:hasPermission="role:admin">
                    <el-menu class="el-menu-vertical-demo" default-active="1-1" >
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                <span slot="title">个人中心</span>
                            </template>
                            <el-menu-item-group>
                                <a href="/admin/userInfo" target="iframe" class="default_active">
                                    <el-menu-item index="1-1">我的信息</el-menu-item>
                                </a>
<!--                                <a href="" target="iframe">-->
<!--                                    <el-menu-item index="1-2">信息修改</el-menu-item>-->
<!--                                </a>-->
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">业务处理</span>
                            </template>
                            <el-menu-item-group>
                                <a href="/admin/goLoansInfo" target="iframe">
                                    <el-menu-item index="2-1">贷款申请处理</el-menu-item>
                                </a>
<!--                                <a href="" target="iframe">-->
<!--                                    <el-menu-item index="2-2">-&#45;&#45;</el-menu-item>-->
<!--                                </a>-->
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">用户操作</span>
                            </template>
                            <el-menu-item-group>
                                <a href="/admin/goUserInfo" @click="updatePage" target="iframe">
                                    <el-menu-item index="3-1">用户信息管理</el-menu-item>
                                </a>
<!--                                <a href="" target="iframe">-->
<!--                                    <el-menu-item index="3-2">-&#45;&#45;</el-menu-item>-->
<!--                                </a>-->
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span slot="title">咨询服务</span>
                            </template>
                            <el-menu-item-group>
                                <a href="/toSocket" target="iframe">
                                    <el-menu-item index="4-1">客户咨询</el-menu-item>
                                </a>
                            </el-menu-item-group>
                        </el-submenu>


                    </el-menu>
                </div>
            </el-aside>
            <el-main>
                <iframe id="main_iframe" width="100%" height="500px" scrolling="auto" frameborder="no" border="0" marginwidth="0"
                        marginheight="0" name="iframe"></iframe>
            </el-main>
        </el-container>
        <el-footer id="el_footer">&copy; 版权所有 2021/09--2021/11</el-footer>
    </el-container>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            //用于更新session中分页页码
            updatePage:function(){
                window.sessionStorage.setItem("currentPage",1);
            }
        }
    });
    window.onload = function () {
        update_height();
        //初始显示该页面
        let default_actives = document.getElementsByClassName("default_active");
        for (var i=0;i<default_actives.length;i++) {
            default_actives[i].click();
        }
    }
    window.onresize = function () {
        update_height();
    }

    function update_height() {
        //动态修改el-main的高度
        var el_header = document.getElementById("el_header");
        var el_footer = document.getElementById("el_footer");
        var main_iframe = document.getElementById("main_iframe");
        var el_aside = document.getElementById("el_aside");
        // var el_main = document.getElementById("el-main")
        //修改内容显示区域的高度   iframe的高度 = window窗体的高度 - header的高度 - footer的高度
        main_iframe.style.height = (window.innerHeight - el_header.offsetHeight - el_footer.offsetHeight - 20) + "px";
        el_aside.style.height = (window.innerHeight - el_header.offsetHeight - el_footer.offsetHeight) + "px";
        // el_main.style.height = (window.innerHeight - el_header.offsetHeight - el_footer.offsetHeight - 20) + "px";
    }
</script>
</body>
</html>
